import Taro, {Component, Config} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, pageSize} from '../../utils/common'

import {toJS} from 'mobx'
import './index.less'
import right from '../../assets/img/right_white.png'

// 建企商学院
interface IHomeProps extends IStoreProps {}

interface registerCount {
  jqCount: number,
  jzCount: number,
  otherCount: number
}

@inject("stores")
@observer
class Index extends Component<IHomeProps> {

  constructor(props) {
    super(props)
  }

  state = {
    allCategories: [],
    items: [],
    totalCount: 0,
    courseInformation: {},
    currentCateGoryId: 1,
    pageIndex: 1,
    pageSize,
    businessSchoolRegistCount: {
      jqCount: 0,
      jzCount: 0,
      otherCount: 0
    }
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'建企商学院' })
    this.getAllCategories()
    this.getAllCourseInformation()
    this.getBusinessSchoolRegistCount()
  }

  changeNav(currentCateGoryId:number) {
    this.setState({
      currentCateGoryId
    },() => {
      this.getAllCourseInformation()
    })
  }

  getAllCategories() {
    let businessSchool = this.props.stores.BusinessSchool
    businessSchool.getAllCategories({
      callback: res => {
        this.setState({
          allCategories: res.items
        })
      }
    })
  }

  getAllCourseInformation() {
    let businessSchool = this.props.stores.BusinessSchool
    let { currentCateGoryId, pageIndex, pageSize } = this.state
    businessSchool.getAllCourseInformation({
      cateGoryId: currentCateGoryId,
      pageIndex,
      pageSize,
      callback: res => {
        this.setState({
          items: res.items,
          totalCount: res.totalCount
        })
      }
    })
  }

  // 获取报名人数
  getBusinessSchoolRegistCount() {
    let { BusinessSchool } = this.props.stores
    BusinessSchool.getBusinessSchoolRegistCount({
      callback: res => {
        this.setState({ businessSchoolRegistCount: toJS(res) })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  handelUpgrade(url: string = '/pages/index/index'): void {
    if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    getRuntime().navigateTo(url)
  }

  render() {
    let { allCategories, currentCateGoryId, items, businessSchoolRegistCount } = this.state
    let { jqCount,jzCount,otherCount } = businessSchoolRegistCount
    return (
     <View className='college-index'>
       <View className='column-title content-30'>
         <Text className='column-name'>培训报名</Text>
       </View>

       <View className='theme-wrap'>
         <View className='theme theme1' onClick={this.handelUpgrade.bind(this, '/pages/business_school/build_company')}>
           <View className='line'>
             <Text className='title'>建企类 </Text>
             <Image className='icon-drop-down' src={right} />
           </View>
           <Text className='sign'>{jqCount===0?'暂无报名':`${jqCount}人已报名`}</Text>
         </View>

         <View className='theme theme2' onClick={this.handelUpgrade.bind(this, '/pages/business_school/architect')}>
           <View className='line'>
             <Text className='title'>建造师</Text>
             <Image className='icon-drop-down' src={right} />
           </View>
           <Text className='sign'>{jzCount===0?'暂无报名':`${jzCount}人已报名`}</Text>
         </View>

         <View className='theme theme3' onClick={this.handelUpgrade.bind(this, '/pages/business_school/other')}>
           <View className='line'>
             <Text className='title'>其他人员</Text>
             <Image className='icon-drop-down' src={right} />
           </View>
           <Text className='sign'>{otherCount===0?'暂无报名':`${otherCount}人已报名`}</Text>
         </View>
       </View>

       <View className='interval' />
       <View className='column-title content-30'>
         <Text className='column-name'>在线学习</Text>
         <Text className='column-more' onClick={this.handelRouter.bind(this, '/pages/business_school/course_list')}>查看更多 > </Text>
       </View>

       <View className='column-type'>
         {
           allCategories.reverse().map(item => {
              return(
                <Text className={currentCateGoryId === item.id ? 'column column-active' : 'column'}
                      key={item.id}
                      onClick={this.changeNav.bind(this, item.id)}
                >{item.cateGoryName}</Text>
              )
           })
         }
       </View>

       {items&&
       items.map(item => {
           return(
             <View className='list-08-item'
                   key={item.id}
                   onClick={this.handelRouter.bind(this, '/pages/business_school/detail?id='+item.id)}>
               <Image className='item-img' src={item.courseLogoImg} />
               <View className='info'>
                 <View className='title'>
                   {item.courseName}
                 </View>
                 <View className='old-price'>￥{item.coursePrice}</View>
                 <View className='price-wrap'>
                   <View className='price'>VIP会员 ￥
                     <Text className='big'>{item.vipCourserPrice }</Text>
                   </View>
                   <View className='num'>{item.studyCount}人学过</View>
                 </View>
               </View>
             </View>
           )
         })
       }
       {items.length<=0 ? <View className='page-none-info'>暂时没有相关课程信息~</View> : ''}
     </View>
    )
  }
}

export default Index
